<template>
  <div class="box">
    <div class="left">
      <tiny-tabs v-model="activeName" title-width="40px" :stretch="true">
        <tiny-tab-item title=" 题目 " name="first">
          <div class="title">
            {{data.title}}
          </div>

          <div class="tag">
            <tiny-tag type="" effect="plain" v-for="(item,index) in data.label?.split(',')">
              {{item}}
            </tiny-tag>
            <tiny-tag type="success" effect="plain">
              {{data.difficulty}}
            </tiny-tag>
            <div class="cnt" v-html="data.content">
            </div>

          </div>
        </tiny-tab-item>
        <tiny-tab-item title="结果分析" name="second">
          数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
        </tiny-tab-item>

      </tiny-tabs>
    </div>
    <div class="right">
      <CodingEditor/>
    </div>
  </div>
</template>

<script setup>
 import CodingEditor from '../components/codeEditor.vue'
 import {ref, onMounted, inject} from "vue"
 import {useRoute} from "vue-router";
 const route = useRoute()
import {Tabs as TinyTabs, TabItem as TinyTabItem, Tag as TinyTag,} from '@opentiny/vue'
const axios = inject("axios")
 onMounted(()=>{
   axios.get("/work/"+route.params.id).then(res=>{
     data.value = res.data.data
   }).catch(err=>{
     console.log(err)
   })
 })
const activeName = ref('first')
const data = ref({
})
</script>
<style scoped lang="less">
.box {
  display: flex;
  width: 100%;
  height: 100%;
    border:1px solid #EBEEF5;

  .left {
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    padding:10px;
    .title{
      height: 30px;
      border-bottom: #DCDFE6 1px solid;
      margin-bottom: 10px;
    }
    .tag{
      .tiny-tag{
        margin-right: 10px;
      }
    }
    .cnt{
      color:#909399;
      letter-spacing: 2px;
      line-height: 30px;
      margin-top:20px;
    }

  }

  .right {
    flex: 1;
    border:1px solid #EBEEF5;
  }
}
</style>
